<template>
	<!-- 定义一个查询容器组件 -->
	<MkQueryContainer style="display: block; overflow: auto;">
		<!-- 定义查询容器的头部模板 -->
		<template #header="">
			<MkForm ref="queryForm" :model="searchParam">
				<MkInput label="发血单" @keyup.enter.native="search" v-model="searchParam.keyword" clearable />
				<MkInput label="患者Id" @keyup.enter.native="search" v-model="searchParam.keyword" clearable />
				<MkInput label="关键字" @keyup.enter.native="search" v-model="searchParam.keyword" clearable />
				<el-checkbox v-model="ctx.jinTian" label="今天" @change="search" />
				<el-checkbox v-model="ctx.zuoTian" label="昨天" @change="search" />
				<el-checkbox v-model="ctx.qianTian" label="前天" @change="search" />
			</MkForm>
		</template>
		<MkTable :data="tableData" v-loading="loading" @row-dblclick="handleDoubleClick">
			<MkColumnIndex width="40px" label="" />
			<MkColumn prop="huanZheId" label="患者ID" width="80px" />
			<MkColumn prop="chuangHao" label="床号" width="45px" />
			<MkColumn prop="xingMing" label="姓名" width="70px" />
			<MkColumnXueYe width="350px" />
			<MkColumn prop="jieShouShiJian" label="接收时间" />
			<MkColumn prop="jieShouRenId" label="接收人" />
		</MkTable>
		<!-- 定义一个分页组件，用于分页查询结果 -->
		<MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :total="total"
			layout="total, sizes, prev, pager, next" @query="search" />
	</MkQueryContainer>
</template>

<script lang='ts' setup>
// 导入申请单相关的 API 和输出类型
import { TraShenQingApi, TraShenQingPageOutput } from '/@/api/tra/TraShenQing';
// 导入分页查询的自定义钩子
import { usePageQuery } from '/@/hooks/usePageQuery'
// 导入自定义工具函数
import { clog, showSuccess } from '/@/utils'
// 定义组件的自定义事件
const emits = defineEmits(['load', "dblclick"])
// 使用分页查询钩子获取搜索参数、总数、表格数据、加载状态和搜索方法
const { searchParam, total, tableData, loading, search } = usePageQuery<TraShenQingPageOutput>(TraShenQingApi.page)

// 定义一个响应式对象，用于存储筛选条件的状态
const ctx = reactive({
	// 今天的筛选状态
	jinTian: true,
	// 昨天的筛选状态
	zuoTian: true,
	// 前天的筛选状态
	qianTian: true,
})

// 定义表格行双击带出申请单
const handleDoubleClick = (row: TraShenQingPageOutput) => {
	emits('dblclick', row)
}

// 组件挂载后触发搜索
onMounted(() => {
	search();
})

defineExpose({ search })
</script>

<style lang='scss' scoped></style>